<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            height: 100%;
        }

        #wrapper {
            width: 100%;
            height: 100%;
            background-color: lightgrey;
        }

        #p1 {
            position: relative;
            top: 150px;
            width: 400px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            margin: auto;
            background-color: white;
        }

        #span1 {
            position: absolute;
            right: 0;
            top: 0;
            width: 30px;
            height: 30px;
            font-size: 20px;
            line-height: 30px;
            text-align: center;
            color: white;
            background-color: rgb(252, 56, 56);
        }
    </style>
</head>

<body>
    <button id="btn">点击此处</button>
</body>
<script>
    var oDiv = document.createElement('div');
    var oP = document.createElement('p');
    var oSpan = document.createElement('span');
    var btn = document.getElementById('btn');
    var body = document.getElementsByTagName('body');
    btn.onclick = function () {
        oP.innerText = 'This is True music';
        oSpan.innerText = 'X';
        oDiv.appendChild(oP);
        oP.appendChild(oSpan);
        oDiv.id = 'wrapper';
        oP.id = 'p1';
        oSpan.id = 'span1';
        body[0].insertBefore(oDiv, btn);
    }
    oSpan.onclick = function () {
        body[0].removeChild(oDiv);
    }
</script>

</html>